<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     商品名称：<input type="text"  value=""><br><br>
    商品类别：<select id="box">
        <option>优质货源</option>
        <option>优质货源</option>
        <option>优质货源</option>
        <option>优质货源</option>
        <option>优质货源</option>
        <option>优质货源</option>
    </select><br><br>
    商品原价：<input type="text"  value=""><br><br>
    商品现价：<input type="text"  value=""><br><br>
    货品数量：<input type="text"  value=""><br><br>
   是否标红： 是<input type="radio" name="mal"/>否<input type="radio" name="mal"/><br><br>
    <input type="button" id="btn" value="提交信息">
    <div id="data">
			
    </div>
    
    <table id="tab" border="" cellspacing="" cellpadding="">
    
        <tr><th>商品名称</th><th>商品类别</th><th>商品原价</th><th>商品现价</th><th>货物数量</th><th>是否标红</th></tr>
       
    </table>


    <script>
    var box=document.querySelector('#box')
    var ipts = document.getElementsByTagName('input')
	
    var addBtn = document.getElementById('btn')
    addBtn.onclick = function(){
        //创建第一个td
        var td = document.createElement('td');
        td.innerHTML = ipts[0].value;
        //c创建第二个td
        var td1=document.createElement('td')
        td1.innerHTML=box.value;
        //c创建第3个td
        var td2 = document.createElement('td');
        td2.innerHTML = ipts[1].value;
       //创建第4个td
        var td3 = document.createElement('td');
        td3.innerHTML = ipts[2].value;
        //c创建第5个td
        var td4 = document.createElement('td');
        td4.innerHTML = ipts[3].value;
        var td5 = document.createElement('td');
        td5.innerHTML = ipts[4].value;
        
        //c创建第6个td
        var td6= document.createElement('td');
        //创建删除按钮
        var deleteBtn = document.createElement('a');
        deleteBtn.href = 'javascript:;'
        deleteBtn.innerHTML = '删除'
        
        //删除按钮加入td3
        td6.appendChild(deleteBtn);
        
        deleteBtn.onclick  = function(){
            //删除一行 
            //this 是删除按钮，删除按钮的父元素是td，td的父元素是tr
            this.parentNode.parentNode.remove()
        }
        
        
        
        //创建tr
        var tr = document.createElement('tr')
        //把td 加入tr
        tr.appendChild(td);
        tr.appendChild(td1)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
        tr.appendChild(td5)
        tr.appendChild(td6)
        //把tr 添加到 tab中
        var tab = document.getElementById('tab');
        tab.appendChild(tr);
        
        
    }
    

    
    </script>


</body>
</html>